[V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" export function Header() { const navItems = [ { name: "Distributer", active: true }, { name: "Sales", active: false }, { name: "Inventory", active: false }, { name: "Products", active: false }, ] return (

Dashboard

) } [V0_FILE]typescriptreact:file="components/filters.tsx" isMerged="true" "use client" import { useState } from "react" interface FilterOption { label: string value: string } interface FilterProps { label: string options: FilterOption[] value: string onChange: (value: string) => void } function Filter({ label, options, value, onChange }: FilterProps) { const [isOpen, setIsOpen] = useState(false) return (

{isOpen && (

{options.map((option) => ( ))}

)}

) } export function FilterBar() { const [filters, setFilters] = useState({ timeline: "", accounts: "", salesPerson: "", product: "", }) const handleFilterChange = (filterName: string) => (value: string) => { setFilters((prev) => ({ ...prev, [filterName]: value })) } return (

Timeline

) } [V0_FILE]typescriptreact:file="components/metric-card.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" interface MetricCardProps { title: string value: string | number icon: React.ReactNode color: "green" | "blue" | "purple" | "yellow" } export function MetricCard({ title, value, icon, color }: MetricCardProps) { const colorClasses = { green: "bg-green-100 text-green-600", blue: "bg-blue-100 text-blue-600", purple: "bg-purple-100 text-purple-600", yellow: "bg-yellow-100 text-yellow-600", } return (

{icon}

{title}

{value}

) } [V0_FILE]typescriptreact:file="components/stats-card.tsx" isMerged="true" interface StatsCardProps { title: string value: string | number } export function StatsCard({ title, value }: StatsCardProps) { return (

{title}

{value}

) } [V0_FILE]typescriptreact:file="components/icons.tsx" isMerged="true" export function OrdersIcon() { return ( ) } export function OpenOrdersIcon() { return ( ) } export function ClosedOrdersIcon() { return ( ) } export function StockIcon() { return ( ) } export function ReturnOrdersIcon() { return ( ) } export function InwardsIcon() { return ( ) } [V0_FILE]typescriptreact:file="components/time-period-selector.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown } from "lucide-react" interface TimePeriodSelectorProps { value: string onChange: (value: string) => void } export function TimePeriodSelector({ value, onChange }: TimePeriodSelectorProps) { const [isOpen, setIsOpen] = useState(false) const periods = ["This Week", "Last Week", "This Month", "Last Month", "This Quarter"] return (

{isOpen && (

{periods.map((period) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="components/area-chart.tsx" isEdit="true" isMerged="true" "use client" import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { TimePeriodSelector } from "./time-period-selector" import { useState } from "react" interface DataPoint { date: string primary: number secondary: number } interface AreaChartProps { title: string data: DataPoint[] colors: { primary: string secondary: string } labels: { primary: string secondary: string } } interface CustomTooltipProps { active?: boolean payload?: any[] colors: { primary: string secondary: string } } const CustomTooltip = ({ active, payload, colors }: CustomTooltipProps) => { if (!active || !payload || !payload.length) return null return (

{payload.map((entry, index) => (

{`${entry.value}k`}

))}

) } export function CustomAreaChart({ title, data, colors, labels }: AreaChartProps) { const [period, setPeriod] = useState("This Week") return ( {title}

{labels.primary}

{labels.secondary}

`${value}k`} /> } />

) } [V0_FILE]typescriptreact:file="components/charts-section.tsx" isEdit="true" isMerged="true" "use client" import { CustomAreaChart } from "./area-chart" const budgetVsSecondaryData = [ { date: "02 Mon", primary: 33, secondary: 25 }, { date: "03 Tue", primary: 30, secondary: 20 }, { date: "04 Wed", primary: 29, secondary: 25 }, { date: "05 Thu", primary: 26, secondary: 26 }, { date: "06 Fri", primary: 27, secondary: 24 }, { date: "07 Sat", primary: 27, secondary: 20 }, { date: "08 Sun", primary: 32, secondary: 31 }, ] const budgetVsInvoiceData = [ { date: "02 Mon", primary: 34, secondary: 24 }, { date: "03 Tue", primary: 30, secondary: 20 }, { date: "04 Wed", primary: 29, secondary: 25 }, { date: "05 Thu", primary: 26, secondary: 24 }, { date: "06 Fri", primary: 27, secondary: 23 }, { date: "07 Sat", primary: 27, secondary: 30 }, { date: "08 Sun", primary: 32, secondary: 31 }, ] export function ChartsSection() { return (

) } [V0_FILE]typescriptreact:file="components/map-visualization.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" interface DataPoint { id: string lat: number lng: number type: "distributor" | "hospital" value: number } // Sample data points - in a real application, these would be more accurate const dataPoints: DataPoint[] = [ { id: "1", lat: 28.7041, lng: 77.1025, type: "distributor", value: 20 }, { id: "2", lat: 28.7041, lng: 77.1025, type: "hospital", value: 200 }, // Add more data points for different regions ] export function MapVisualization() { return ( Distribution Network

Distributors

Hospitals

) } [V0_FILE]typescriptreact:file="dashboard.tsx" isEdit="true" import { Header } from "./components/header" import { FilterBar } from "./components/filters" import { MetricCard } from "./components/metric-card" import { StatsCard } from "./components/stats-card" import { ChartsSection } from "./components/charts-section" import { MapVisualization } from "./components/map-visualization" import { OrdersIcon, OpenOrdersIcon, ClosedOrdersIcon, StockIcon, ReturnOrdersIcon, InwardsIcon, } from "./components/icons" export default function Dashboard() { const metrics = [ { title: "Total Orders", value: "57", icon: , color: "green" as const }, { title: "Open Orders", value: "24", icon: , color: "blue" as const }, { title: "Closed Orders", value: "33", icon: , color: "green" as const }, { title: "Stock Value", value: "₹15.23k", icon: , color: "purple" as const }, { title: "Return Orders", value: "05", icon: , color: "yellow" as const }, { title: "Inwards", value: "01", icon: , color: "blue" as const }, ] const stats = [ { title: "Total Hospitals", value: "28,900" }, { title: "Near Expiry Products", value: "250" }, { title: "Total Outstanding Amount", value: "₹10,20,000" }, ] return (

{metrics.map((metric) => ( ))}

{stats.map((stat) => ( ))}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This